<template>
  <div class="header">
    <!-- logo -->
    <div class="logo">
      <i class="iconfont icon-tianqi"></i>
      <h2>新中地天气</h2>
    </div>
    <!-- ip天气 -->
    <div class="weather">
      <h4 v-if="localCity == false">加载ing</h4>
      <h4 v-else>{{ localCity.city }}</h4>
      <span v-if="localWeather == false">加载ing</span>
      <span v-else
        >实时天气：{{ localWeather.dayweather }}
        {{ localWeather.daytemp }}℃</span
      >
      <span v-if="ipCWdata == false">加载ing</span>
      <span v-else
        >{{ localWeather.daywind }}风≤{{
          localWeather.daypower.split('-')[1]
        }}级</span
      >
    </div>
    <!-- tips按钮 -->
    <div class="tips">
      <i class="iconfont icon-tishi" @click="showTips = !showTips"></i>
      <i
        class="iconfont icon-jia"
        v-if="hasCityParam && !isCityIncluded"
        @click="addcity"
      ></i>
    </div>
    <!-- 内置弹窗 -->
    <div class="tips-modal-mask" v-if="showTips">
      <div class="tips-modal">
        <h3>关于:</h3>
        <p>这个应用可以用来追踪你选择城市的当前天气</p><br>
        <h3>如何使用:</h3>
        <p>1. 点击搜索框输入你希望追踪的城市</p>
        <p>2. 在搜索结果中选中一个城市，你将获取当地最新的天气</p>
        <p>3. 点击右侧的 + 号可以将追踪城市的天气情况保存在首页</p><br>
        <h3>移除城市:</h3>
        <p>如果你不想在首页关注某个城市，可以通过底部的按钮删除它</p>
        <button class="close-btn" @click="showTips = false">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';

// 导入请求方法
import { getipcityname } from '../api/wdata.js';
import { getadcodeweather } from '../api/wdata.js';

// 存储 ip对应的 城市信息
const localCity = ref({});
// 存储天气
const localWeather = ref({});
// 天气对象
const ipCWdata = ref([]);

//引入pinia 添加的城市
import { storeToRefs } from 'pinia';
import { useLocalStore } from '@/stores/local';
const { cityNamep } = storeToRefs(useLocalStore());
const { updataWip, addCityname } = useLocalStore();

// 引入路由->获取城市名
import { useRoute } from 'vue-router';
const route = useRoute();

// 判断路由是否存在cityName参数
const hasCityParam = computed(() => !!route.params.cityName);

// 计算属性：检查cityNamep中是否包含路由参数中的城市名（直接比较字符串）
const isCityIncluded = computed(() => {
  if (!route.params.cityName || cityNamep.value.length === 0) {
    return false;
  }
  return cityNamep.value.includes(route.params.cityName);
});

// 将城市信息 添加
const addcity = () => {
  addCityname(route.params.cityName);
};
// 请求数据->获取本地天气
onMounted(async () => {
  try {
    // ip获取城市信息
    localCity.value = await getipcityname();
    console.log('ip城市名：', localCity.value);
    // code获取 天气
    ipCWdata.value = await getadcodeweather(localCity.value.adcode);
    localWeather.value = ipCWdata.value.forecasts[0].casts[0];

    console.log('天气', localWeather.value);

    // 调用仓库方法，将天气数组保存到 pinia
    const weatherarry = ipCWdata.value.forecasts[0].casts;
    updataWip(weatherarry);
  } catch (error) {
    console.log('获取失败：', error);
  }
});

const showTips = ref(false); // 控制弹窗显示隐藏
</script>

<style lang="scss" scoped>
// 引入icon图标
@import '//at.alicdn.com/t/c/font_4967734_0s8ar8fgcgjm.css';

// 头部样式
.header {
  display: flex;
  align-items: center;
  height: 80px;
  background-color: #00668a;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  .logo {
    display: flex;
    align-items: center;
    margin-left: 160px;
    gap: 16px;
    i {
      font-size: 28px;
    }
    h2 {
      font-size: 1.5rem;
    }
  }
  .weather {
    display: flex;
    align-items: center;
    margin-left: 40px;
    gap: 16px;
    h4 {
      font-size: 20px;
      font-weight: 600;
    }
  }
  .tips {
    display: flex;
    align-items: center;
    justify-content: end;
    flex: 1;
    margin-right: 160px;
    i {
      font-size: 28px;
      margin-left: 5px;
    }
  }

  .tips-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .tips-modal {
      width: 400px;
      padding: 20px;
      background-color: #ffffff;
      color: black;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      line-height: 23px;
      h3{
        font-size: 20px;
        font-weight: 400;
      }

      .close-btn {
        margin-top: 20px;
        padding: 8px 16px;
        background: #00668a;
        color: #fff;
        border: none;
        cursor: pointer;
      }
    }
  }
}
</style>
